import { View,Image } from '@tarojs/components';
import s from'./index.module.scss'
import { useEffect, useRef, useState } from 'react';
import classNames from 'classnames';

const __role = [
  { picture: "cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/liuying.jpg",
    vertical: 'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/liuying.png',
    font: '熔火骑士',
    name: '流莹',
    desc: '星核猎手成员，身着机械装甲「萨姆」的少女。',
    saying:'就此离开没人会受伤，否则你们都会死。'
  }, {
    picture: "cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/keli.jpg",
    vertical: 'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/keli.png',
    font: '逃跑的太阳',
    name: '可莉',
    desc: '西风骑士团，「火花骑士」可莉。',
    saying:'锵锵，可莉登场。'
  }, {
    picture: "cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/huohuo.jpg",
    vertical: 'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/huohuo.png',
    font: '十王司判官',
    name: '藿藿',
    desc: '名为「尾巴」的岁阳被十王司的判官封印着她的颀尾上，使她成为了招邪的「贞凶之命」。',
    saying:'灵符，保命。'
  }, {
    picture: "cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/wanye.jpg",
    vertical: 'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/wanye.png',
    font: '流浪的诗人',
    name: '万叶',
    desc: '稻妻出身的浪人武士，为人谦和，个性温顺。',
    saying:'海鸥别叫啦，从今天起，我也是漂泊者。'
  }, {
    picture:'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/xiao.jpg',
    vertical:'cloud://develop-3gnhbrj323546fde.6465-develop-3gnhbrj323546fde-1258315057/xiao.png',
    font:'降魔大圣',
    name:'魈',
    desc: '璃月的护法夜叉，为璃月的万家灯火而战，号「降魔大圣」！',
    saying:'「三眼五显仙人」--「魈」，听召前来守护。'
  }
]

export default function Index() {
  //值的改变不会导致重新渲染
  const animating = useRef(false)
  const pre = useRef(-1)
  const [isDefault, setISDefault] = useState(true)
  const [activeDefault, setActiveDefault] = useState(false)
  
  // ----
  const [current, setCurrent] = useState<number>(-1)

  const [activeList, setActiveList] = useState(__role.map(() => ({ 
    active: false,
    isShow: false
  })))
  
  const default_transition = classNames(s.appear, {
    [s.fade]: activeDefault
  })

  useEffect(() => {
    if (pre.current < 0 && current >= 0) {
      activeList[current].isShow = true
      setActiveList([...activeList])

      setTimeout(() => {
        activeList[current].active = true
        setActiveList([...activeList])
      }, 50)
    }
    if (pre.current >= 0 && current >= 0) {
      activeList[pre.current].active = false
      activeList[current].isShow = true
      setActiveList([...activeList])

      setTimeout(() => {
        activeList[current].active = true
        setActiveList([...activeList])
      }, 50)

      setTimeout(() => {
        activeList[pre.current].isShow = false
        setActiveList([...activeList])
      }, 1000)
    }

    if (pre.current >= 0 && current < 0) {
      activeList[pre.current].active = false
      setActiveList([...activeList])
      setTimeout(() => {
        activeList[pre.current].isShow = false
        setActiveList([...activeList])
      }, 1000)
      return
    }
  }, [current])

  useEffect(() => {
    setTimeout(() => {
      setActiveDefault(true)
    }, 16.7)
  }, [])
  
  useEffect(() => {
    if (current < 0) {
      // 执行增加节点，并间隔一帧，执行添加动画
      setISDefault(true)
      setTimeout(() => {
        setActiveDefault(true)
      }, 16.7)
    } else {
      // 执行删除动画，然后动画结束之后，执行删除节点
      setActiveDefault(false)
      setTimeout(() => {
        setISDefault(false)
      }, 1000)
    }
  }, [current])
  

  return(
    <View className={s.container}>
      <View className={s.card_wrapper}>
        {__role.map((item, index) => (
          <View className={s.camera}>
            <View
              className={current == index ? `${s.card} ${s.active}` : s.card}
              onClick={() => {
                if (animating.current === true) {
                  return;
                }

                animating.current = true
                setTimeout(() => {
                  animating.current = false
                }, 1100)

                if (current == index) {
                  pre.current = current
                  setCurrent(-1)
                } else {
                  pre.current = current
                  setCurrent(index)
                }
              }}
            >
              <Image
                className={s.role_picture}
                src={item.picture}
                mode='aspectFill'
              />
              <Image
                className={s.role_vertical}
                src={item.vertical}
                mode='aspectFit'
              />
              <View className={s.font}>
                {item.font}
              </View>
            </View>
          </View>
        ))}
      </View>
      <View className={s.introduce}>
        <View className={s.line}></View>
        {isDefault ? (
          <View 
            className={default_transition} 
            onTransitionEnd={() => {
              setISDefault(activeDefault)
            }}
          >
            <View className={s.name}>您还没选中角色</View>
          </View>
        ) : null}
        
        {__role.map((item,index) => (
          <View>
            {activeList[index].isShow ? (
              <View className={activeList[index].active ? `${s.text} ${s.show}` : s.text}>
                <View className={s.name}>{item.name}</View>
                <View className={s.desc}>{item.desc}</View>
                <View className={s.saying}>“{item.saying}“</View>
              </View>
            ) : null}
          </View>
        ))}
      </View>
      
    </View>
  )
}